<style type="text/css">
    #left-side
    {
        width: 35%;
        height: 490px;
        float: left;
        border-right: 1px #D5D3D3 solid;
        border-radius: 7px;
        overflow: auto;
    }
    #right-side
    {
        width: 60%;
        height: 490px;
        float: left;
        text-align: center;
        
    }
    #right-side #container{
    	padding-left: 20%;
    }
    .box{
        width: 300px;
        height: 110px;
        border: 2px solid rgb(121, 135, 231);
        border-radius: 5px;
        background: #0E8EFD; 
        margin-top: 50px;
        box-shadow: 2px 3px 10px 1px;
      
    }
    .box:hover{
        background: #45A9F9;
    }
    .box h2{
        margin-top: 20px;
        color: white;
    }
    .box a{
        text-decoration: none;
    }
    .box h2:hover{
        text-decoration: underline;
    }
    #left-side ul{
        text-align: left;
        font-family: sans-serif;
    }
    #back_btn{
        margin-top: 100px; 
    }
    
   #left-side ul p{
		cursor: pointer;
		display: inline-block;
		min-width: 10px;
		min-height: 10px;
		margin: 5px 2px;
	}
	#left-side ul textarea{
		display: none;
		padding:5px 0px; 
		position: relative;
		top:8px;
		height: 35px;
		margin: 0px;
		margin-bottom: 5px;

	}
	#left-side ul{
		list-style: none;
	}
	#left-side ul li:before{
		 content: "→ ";
	}
	#left-side ul li
	{

	}
	
	.loading_panel{
		padding: 0px;
		margin:0px;
		text-align: center; 
                width:100%;
                height:40px;
                display: none
	}
	.loading_panel img{
		display: inline-block;
                padding: 5px;
                -webkit-border-radius: 3px;       
	}
	.hidden{
		display: none;
	}
	.mapp-settings{
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		z-index: 99999;
		padding-top: 10px;
		text-align:left;
	}
	.mapp-settings div.d1{
		width: 99%;
		height: 97%;
		background: #FFFFFF;
		margin: auto;
	}

	.mapp-header{
		width: 60px;
		display: inline-block;
		position: fixed;
		top: -7px;
		right: -19px;
		padding: 9px 0px;
	}
	.mapp-body{
		width:100%;
		height: 100%;
		padding: 0;
		margin: 0px;
		display:  inline-block;
		
	}
	#quiter{
		font-size: 18px;
	}
	.mapp-settings iframe.global-frame{
		width: 100%;
		height: 100%;
	}
	.shadow {
	-moz-box-shadow: 0px 7px 15px 1px #656565;
	-webkit-box-shadow: 0px 7px 15px 1px #656565;
	-o-box-shadow: 0px 7px 15px 1px #656565;
	box-shadow: 0px 7px 15px 1px #656565;
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565,
		Direction=180, Strength=15);
  }

    
</style>

<div id="step3-container">
    <div id="left-side"> 
          <div class="loading_panel"  >
              <h4 style="display:inline">Chargement...</h4>
              <img valign="midlle" src="<?=  base_url('assets/images')?>/load_3.gif"  width="25" height="25" valign="middle" />
        </div>
        <?=$menu_nav?>
      
    </div>
    <div id="right-side">
	    <div id="container" >
	    
	    	<div class="box">
	        		<a id="shaw-map-settings" href="#" >
	                 	<h2>Mapper les slides</h2>
	                 </a>
	        	</div>
	        	
	            <div class="box download">
	                <a href="<?=base_url('project/download_project')?>">
	                 <h2> Télécharger le projet</h2></a>
	                <center> <?=img('download-zip.png')?></center>
	            </div>
	    </div>

       
    </div>
</div>

<div class="mapp-settings hidden">
	<div class="d1">
	
		<div class="mapp-body">
			<iframe  class="global-frame" src="<?= base_url('image_map') ?>" frameBorder="0">
			</iframe>
		</div>
		
		<div class="mapp-header">
			<button id="quiter" class="btn btn-danger shadow" >&times;</button>
		</div>
		
	</div>

</div>


<script>
$('div.download').click(function()
{
   $('.download a').click();
});
//-------------------- MAP DES IMAGES -----------------------//

$('#quiter').click(function(){
	$('.mapp-settings').hide();
});
$('#shaw-map-settings').click(function(){
	$('.mapp-settings').show();
	return false;
});

//----------------------------------------------------------//

			var current_value = null;
			var isloading = false;
			jQuery(document).ready(function()
			{
				$( document ).ajaxStart(function() {
				  isloading = true;

				});

				$( document ).ajaxComplete(function() {
				  isloading = false;
				  $('.loading_panel').hide();

				}); 
                                $( document ).ajaxError(function()
                                {
                                    alert('ajax error');
                                })

				$('#left-side ul p').click(function()
				{
					if( isloading )
					{
						alert("Please wait ...");
						return;
					}

					self = $(this);
					self.hide();
					var ta = self.parent().children('textarea');
					ta.show();
					ta.focus().val( $.trim( ta.val() ) + ' ');
					current_value = ta.val();
				});

				$('#left-side ul textarea').blur(function()
				{
					self = $(this);
					var p = self.parent().children('p');

					// on teste si la valeur du textarea a été changée 
					if($.trim(current_value) !== $.trim(self.val() ) )
					{
						$('.loading_panel').show();

						$.ajax(
						{
							url  : "<?=  base_url('project/update_menu')?>",
							type : "post",
							data : { menu_id : self.attr('id') , menu_title : self.val() },
							success : function(data)
							{
								self.hide();
								p.text(self.val() );
								p.show();
                                                                hanndel_respone(data);
							}
						});

					}
					else
					{
						self.hide();
						p.text(self.val() )
						p.show();
					}
				});
			});

                function hanndel_respone(data)
                {
                   var obj =JSON.parse(data);
                   if(obj.success != 1 )
                   {
                       alert(obj.error);
                   }
                       
                }
 </script>
